<template>
  <h3>显示鼠标位置坐标</h3>
  <div class="about">
    <div id="gisView"></div>
    <div class="myradio">
      <span>Web墨卡托参考系坐标---X:{{x.toFixed(3)}}&nbsp;|&nbsp;Y:{{y.toFixed(3)}}</span><br>
      <span>WGS84参考系坐标---经度:{{lonx.toFixed(5)}}°&nbsp;|&nbsp;纬度:{{lonx.toFixed(5)}}</span>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import Map from "@arcgis/core/Map";
import MapView from "@arcgis/core/views/MapView.js";

let viewMap = null;
let map = null;
let x = ref(0);  // Web墨卡托参考系坐标
let y = ref(0);
let lonx = ref(0); // WGS84参考系坐标
let lony = ref(0);

onMounted(() => {
  initMap();
});
// 初始化地图
const initMap = () => {
  map = new Map({
    basemap: "satellite", // 设置地图类型为标注影像混合切片
  });

  viewMap = new MapView({
    container: "gisView", // 挂载在那个DOM
    map: map, // 绑定的map对象
    center: [113.5, 23.2], // 设置视图的中心点
    zoom: 8, // 设置视图初始的缩放级别
  });

    //👇👇添加viewMap的移动鼠标事件的处理程序,viewMap对象的toMap方法将屏幕坐标转换成point对象,
    //👇👇toMap方法的参数是一个对象,对象有两个成员,分别是当前鼠标所在位置的屏幕坐标x,y
    //👇👇point对象有几个常用属性,x表示投影参考系下的x坐标,y表示投影参考系下的y坐标,
    //👇👇如果投影参考系为3857,那么longitude属性表示相应的经度,latitude表示纬度,否则这两个属性值为0
  viewMap.on("pointer-move",(event)=>{
        x.value=viewMap.toMap({x:event.x,y:event.y}).x//point:x,y,type="point",latitude,longitude
        y.value=viewMap.toMap({x:event.x,y:event.y}).y
        lonx.value=viewMap.toMap({x:event.x,y:event.y}).longitude
        lony.value=viewMap.toMap({x:event.x,y:event.y}).latitude
    })
    //viewMap的toScreen()方法将地图坐标转换成屏幕坐标,参数是一个对象,对象的x,y属性分别表示投影参考系下的x,y坐标值

  viewMap.ui.remove(["zoom", "attribution"]);  // 把缩放按钮去掉，和把底部的介绍去掉
}
</script>

<style scoped>
.about {
  height: 80vh;
  display: flex;
  align-items: center;
  position: relative;
}
.about #gisView {
  width: 100%;
  min-height: 80vh;
  border: 1px solid teal;
}
.myradio {
  width: 390px;
  height: 50px;
  line-height: 25px;
  position: fixed;
  top: 130px;
  left: 30px;
  background-color: white;
  border-radius: 5px;
  font-size: 14px;
  padding: 0 10px;
}
</style>
